<template>
    <div class="commission-layout">
      <div class="info-back  search-part">
                <div class="back-icon" @click="back()">
                    <i class="fa fa-arrow-left" aria-hidden="true"></i>
                </div>

      </div>
      <div id="myDIV">
        <div v-for="(item, $index) in items" class="commission-list">
          <div class="grid-content bor-radius-10 mg-bo-10 pos-relative">
            <div class="card-01">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="purchase-img">
                            <img v-if="item.goodsPicturesName" :src="static_url + item.goodsPicturesName">
                            <img v-else src="../../../../static/img/goods.png">
                        </div>
                    </el-col>
                    <el-col :span="20">
                        <div class="grid-content text">
                          <el-row :gutter="20">
                            <el-col :span="12">
                              <div class="grid-content bg-purple goods-name">
                                  {{item.goodsName}}
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                  {{item.createTime}}
                              </div>
                            </el-col>
                          </el-row>

                          <el-row :gutter="20">
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                  单价：{{Number(item.price || 0).toFixed(2)}}
                              </div>
                            </el-col>
                            <el-col :span="12">
                              <div class="grid-content bg-purple">
                                  数量：{{item.quantity}}
                              </div>
                            </el-col>
                          </el-row>

                          <p class="l2" >
                            <span v-for="(handler, $index) in item.handlers" style="padding-right: 5px">{{handler.handlerName}}({{handler.jobName}})</span>
                          </p>

                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
    <div class="pages">当前第{{currentPage}}页总共{{totalPage}}页</div>
    <div style=" width: 150px; margin: 0 auto;" v-if="allData">没有更多数据了</div>

  </div>
</div>
</template>

<script>
    export default {
      name:'keepAilve',
        data: function () {

            return {
              allData: false,
              allItems: [],
              items: [],
              loading:false,
              static_url: this.$cfg.static_url + "/",
              args: '',

              rows: 20,//显示数量
              page: 1,//当前页数
              totalPage: 1,//总页数
            }
        },

        computed: {
            currentPage: function () {

                if (this.page < this.totalPage) {

                    return this.page;
                } else {
                    return this.totalPage;
                }
            }
        },
        mounted: function () {
            this.loadMore();
            this.$$("#content").scrollTop(0)
            let self = this;

            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
        },
        methods:{
          back: function () {
            this.$router.push({
              path:'/report',
            });
          },

          loadMore: function () {
            console.log("==========>loadMore");
              this.args = this.$route.params;
              console.log(this.args);

              if (this.page <= this.totalPage) {
                  let self = this;
                  self.loading = true;
                  this.$axioxs({
                     method: 'get',
                     url: '/commission/entry?bizDate='+this.args.bizDate+'&type='+this.args.type+'&userId='+ this.args.userId + "&rows=" + this.rows + "&page=" + this.page
                  })
                  .then(function (res) {
                    console.log(res.data)
                        self.totalPage = res.data.totalPage;
                        self.allItems = res.data.records;
                        self.allItems.forEach(item => {
                            item.height = 265;
                            item.width = 300;
                            self.items.push(item);
                        });
                        self.allData = false;
                        self.loading = false;
                      })
                      .catch(function (error) {
                        console.log(error);
                        self.$message({
                            showClose: true,
                            type: 'error',
                            message: error,
                        });
                      });
              }
              else {
                  this.loading = false;
                  this.allData = true;
              }
          },
        }
    }
</script>

<style scoped>
.goods-name{
  font-size: 1em!important;
  font-weight: bold;
}

.el-row{
  padding-bottom: 10px
}
p{
  margin: 0;
}
#myDIV{
  padding-top: 50px;
}

.commission-list{
  margin-top: 5px;
  padding: 20px 10px 0 10px;
  border-bottom: 1px solid #cacaca;
}
.pages {
    position: fixed;
    bottom: 0;
    text-align: center;
    width: 70%;
    margin: 0 auto;
    /* background: black; */
    z-index: 20;
    height: 20px;
    opacity: 0.5;
    font-size: 9px;
}
.purchase-img{
    width: 80px;
    height:80px;
    margin-left: 10px;
    margin-top: 8px;
}
.purchase-img img{
    width: 100%;
    height: 100%;
}
</style>
